<template>
  <div>
    <h2>父组件</h2>
    <!-- 父组件的内容尽可能少一些，复杂的业务分发出去由子组件完成 -->
    <SonBox :str="uname" :sondata="dataList" @fatherFn="fn" />

    <!-- 父组件用父组件的数据 -->
    <p>父组件的内容：{{ tips }}</p>
  </div>
</template>

<script>
import SonBox from '../components/SonBox.vue'

export default {
  components: {
    SonBox
  },
  data() {
    return {
      tips: '鸳鸯被里成双夜, ',
      uname: '传给子组件的值',
      dataList: [
        { id: 1, name: '迪丽热巴', age: 22 },
        { id: 2, name: '古力娜扎', age: 24 },
        { id: 3, name: '马儿扎哈', age: 17 },
        { id: 4, name: '雷霆嘎巴', age: 19 },
        { id: 5, name: '阿里巴巴', age: 29 }
      ]
    }
  },
  methods: {
    fn(str) {
      this.tips += str
    }
  }
}
</script>

<style lang="less" scoped></style>
